<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
  ticket: {
    type:Object
  }
});

</script>

<template>
  <section class="ticketUtil" v-if="props.ticket">
    <div class="wrap">
      <div class="content">
        <div class="title">
          <span class="text name">优化劵</span>
          <span class="text">新人专享</span>
        </div>
        <div class="price"><span>￥</span>{{props.ticket.risePrice}}</div>
        <div class="desc">满{{props.ticket.couponPrice}}元可用</div>
      </div>
      <div class="status"><span>领取</span></div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.ticketUtil {
  width: 1.36rem;
  box-sizing: border-box;
  display: flex;
  padding: .05rem;
  .wrap {
    display: flex;
    .content {
      height: .6rem;
      font-size: .1rem;
      color:#46bcbe;
      box-shadow: 0 0 3px rgba(0,0,0,.15);
      padding-right: .25rem;
      border-radius: .1rem 0 0 .1rem;
      .title {
        position: relative;
        display: inline-block;
        overflow: hidden;
        border-radius: .04rem 0 .04rem 0;
        margin-bottom: .05rem;
          &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          border: .01rem solid #46bcbe;
        }
        .text {
          line-height: .14rem;
          font-size: .1rem;
          padding: .01rem .02rem;
          &.name {
            background: #46bcbe;
            color: #fff;
          }
        }
      }
      .price {
        display: flex;
        align-items: flex-start;
        font-size: 24px;
        padding-left: .1rem;
        span {
          font-size: .12rem;
          padding-top: .05rem;
        }
      }
      .desc {
        padding-left: .1rem;
        font-size: .1rem;
      }
    }
    .status {
      width: .2rem;
      height: .6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #46bcbe;
      color: white;
      position: relative;
      z-index: 0;
      font-size: .12rem;
      span {
        text-align: center;
      }
      &::before {
        width: .08rem;
        height: .08rem;
        content:"";
        border-radius: 50%;
        background: white;
        position: absolute;
        left: -.04rem;
        top: -.04rem;
        z-index: 2;
        border-bottom: .01rem solid rgba(0,0,0,.15);
      }
      &::after {
        width: .08rem;
        height: .08rem;
        content:"";
        border-radius: 50%;
        background: white;
        position: absolute;
        left: -.04rem;
        bottom: -.04rem;
        z-index: 2;
        border-top: .01rem solid rgba(0,0,0,.15);
      }
    }

  }
}

</style>

